<template>
    <fl-navBar dark :border="false" title="通讯录" color="#333333" :fixed="true" background-color="transparent" status-bar />
    <fl-search placeholder="请输入姓名" @searchCon="searchCon" />
    <view class="scroll_box">
        <fl-phone v-show="para['params[wd]'].length > 0" :userList="userList" />

        <UindexList v-if="itemArr.length > 0 && para['params[wd]'].length == 0" activeColor="#1D84F6" class="index_list"
            :index-list="indexList">
            <template v-for="(item, index) in itemArr">
                <u-index-item>
                    <view class="myself" @tap="getDetail(maxOrgId)" v-if="index === 0">
                        <view class="my_title">江苏联合职业技术学院（本部）</view>
                        <view class="my_cont">
                            <view class="myIcon">
                                <image :src="logo ? logo : '../../static/images/schoollogo.png'" />
                            </view>
                            <view class="mySchool">江苏联合职业技术学院</view>
                        </view>
                    </view>
                    <u-index-anchor color="#666666" size="13px" class="index_anchor"
                        :text="`${indexList[index]}  (${item.child.length})`"></u-index-anchor>
                    <view @tap="getDetail(cell.orgId)" class="list-cell" v-for="(cell, index) in item.child">
                        <view class="left_logo">
                            <image :src="cell.logo ? cell.logo : '../../static/images/schoollogo.png'" class="sc_logo" />
                        </view>
                        <view class="right_name">{{ cell.orgName }}</view>
                    </view>
                </u-index-item>
            </template>
        </UindexList>

    </view>
</template>
  
<script setup>
import { ref } from 'vue'
import { getBooks, getBooksDetail } from '@/api/http'
import { onLoad, onShow } from "@dcloudio/uni-app";
import UindexList from '@/components/u-index-list/u-index-list.vue'
const indexList = ref([])
const itemArr = ref([])
const maxOrgId = ref('')
const logo = ref('')
const userList = ref([])
const para = {
    'params[wd]': ''
}
const searchCon = async (e) => {
    para['params[wd]'] = e
    const res = await getBooksDetail(para)
    userList.value = transformData(res.rows)
}

onLoad(() => {
    getList()
})
const getList = async () => {
    const res = await getBooks()
    maxOrgId.value = res.data[0].orgId
    logo.value = res.data[0].logo

    res.data.forEach((ele, index) => {
        if (index > 0) {
            indexList.value.push(ele.orgName === '南通' ? ' ' + ele.orgName : ele.orgName)
            itemArr.value.push(ele)
        }
    })
}
const getDetail = (orgId) => {
    uni.navigateTo({ url: '/pages/booksDetail/index?orgId=' + orgId })
}
const transformData = (data) => {
    return data.reduce((result, obj) => {
        const existingObj = result.find(item => item.orgName === obj.orgName);
        if (existingObj) {
            existingObj.children.push(obj);
        } else {
            result.push({ orgName: obj.orgName, children: [obj] });
        }
        return result;
    }, []);
}
</script>
  
<style scoped lang="scss">
page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .scroll_box {
        flex: 1;
        height: 100%;
        background-color: #fff;
        overflow: hidden;

        .myself {
            width: 92%;
            margin: 0 auto;


            .my_title {
                font-size: 26rpx;
                color: #666666;
                margin: 25rpx 0 16rpx 0;

                .city_num {
                    padding-left: 15rpx;
                }
            }

            .my_cont {
                height: 100rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #EBEDF0;

                .myIcon {
                    width: 76rpx;
                    height: 76rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    // background-color: #004190;
                    margin-right: 15rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .mySchool {
                    font-size: 28rpx;
                    color: #333333;

                }
            }
        }


        .index_anchor {
            background-color: #fff !important;
            border-bottom: 0rpx !important;
        }

        .list-cell {
            display: flex;
            align-items: center;
            height: 90rpx;

            .left_logo {
                width: 75rpx;
                height: 75rpx;
                border-radius: 50%;
                overflow: hidden;
                // background-color: #034190;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .right_name {
                font-size: 28rpx;
                color: #333333;
                margin-left: 15rpx;
            }
        }
    }
}
</style>
  